<template>
  <div>
    <button @click="btnClick('HmAaa')">显示A组件</button>
    <button @click="btnClick('HmBbb')">显示B组件</button>
    <!-- <HmAaa v-if="str === 'aaa'"></HmAaa>
    <HmBbb v-else-if="str === 'bbb'"></HmBbb> -->
    <!-- 动态组件
    is的值是什么，它就渲染什么组件，is一定要绑定    
     -->
    <component :is="str"></component>
  </div>
</template>
<script>
import HmAaa from '@/components/HmAaa.vue'
import HmBbb from '@/components/HmBbb.vue'
export default {
  components: {
    HmAaa,
    HmBbb
  },
  data () {
    return {
      str: 'HmAaa'
    }
  },
  methods: {
    btnClick (val) {
      this.str = val
    }
  }
}
</script>
<style></style>
